<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <div id="root">
        <h1 v-if="see">
            {{data1}}
        </h1>
    </div>

    <div id="root1">
        <h1 v-html="data2"></h1>
    </div>

    <div id="root2">
        <h1 v-bind:id="num">
            {{data3}}
        </h1>
    </div>

    <div id="root3">
        <h1 v-show="score>=60">及格</h1>
    </div>

    <div id="root4">
        <h1 v-if="score < 60">不及格</h1>
    </div>

    <div id="root5">
        <li v-for="n in arrs">
            {{n}}
        </li>
    </div>

    <div id="root6">
        <template v-for="item in arrs">
            <div v-if="item%2==0">{{item}}</div>
        </template>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return{
                    data1:'Hello Vue!',
                    see:true,
                }
            }
        })
        const vm = app.mount('#root')

        const app1 = Vue.createApp({
            data(){
                return{
                    data2:"版权标识符&copy;"
                }
            }
        })
        const vm1 = app1.mount('#root1')

        const app2 = Vue.createApp({
            data(){
                return{
                    data3:'Hello!',
                    num:1010
                }
            }
        })
        const vm2 = app2.mount('#root2')

        const app3 = Vue.createApp({
            data(){
                return{
                    score:60
                }
            }
        })
        const vm3 = app3.mount('#root3')

        const app4 = Vue.createApp({
            data(){
                return{
                    score:59
                }
            }
        })
        const vm4 = app4.mount('#root4')

        const app5 = Vue.createApp({
            data(){
                return{
                    arrs:[1,3,5,7,9,11]
                }
            }
        })
        const vm5 = app5.mount('#root5')

        const app6 = Vue.createApp({
            data(){
                return{
                    arrs : [1,3,5,7,9,2,4,6,8]
                }
            }
        })
        const vm6 = app6.mount('#root6')
    </script>
</body>
</html>